<nb-card [nbSpinner]="loading" nbSpinnerStatus="primary" nbSpinnerSize="large">
	<nb-card-header class="d-flex flex-column pb-0">
		<div class="card-header-title">
			<h4>
				<ngx-header-title [allowEmployee]="false">
					{{ 'USERS_PAGE.HEADER' | translate }}
				</ngx-header-title>
			</h4>
			<ng-template ngxPermissionsOnly="ORG_USERS_EDIT">
				<ng-template [ngxPermissionsOnly]="['ORG_INVITE_VIEW', 'ORG_INVITE_EDIT']">
					<button
						nbButton
						class="action"
						size="small"
						*ngIf="organizationInvitesAllowed"
						status="primary"
						(click)="manageInvites()"
					>
						{{ 'BUTTONS.MANAGE_INVITES' | translate }}
					</button>
				</ng-template>
			</ng-template>
		</div>
		<div class="align-self-end">
			<ng-template ngxPermissionsOnly="ORG_USERS_EDIT">
				<ngx-gauzy-button-action
					[componentName]="viewComponentName"
					[buttonTemplate]="actionButtons"
					[buttonTemplateVisible]="visible"
					[isDisable]="disableButton"
				></ngx-gauzy-button-action>
			</ng-template>
		</div>
	</nb-card-header>
	<nb-card-body>
		<ng-template ngxPermissionsOnly="ORG_USERS_EDIT">
			<div class="edit-user-mutation" *ngIf="showAddCard">
				<ng-template ngxPermissionsOnly="TENANT_ADD_EXISTING_USER">
					<ga-edit-user-mutation
						[organization]="organization"
						(addOrEditUser)="addOrEditUser($event)"
						(canceled)="cancel()"
					></ga-edit-user-mutation>
				</ng-template>
			</div>
		</ng-template>
		<ng-template [ngIf]="dataLayoutStyle === componentLayoutStyleEnum.TABLE" [ngIfElse]="gridLayout">
			<div class="table-scroll-container">
				<angular2-smart-table
					style="cursor: pointer"
					[settings]="settingsSmartTable"
					[source]="sourceSmartTable"
					(userRowSelect)="selectUser($event)"
				></angular2-smart-table>
			</div>
			<div class="pagination-container align-self-end">
				<ng-container *ngIf="sourceSmartTable">
					<ngx-pagination [source]="sourceSmartTable"></ngx-pagination>
				</ng-container>
			</div>
		</ng-template>
		<ng-template #gridLayout>
			<div class="grid">
				<ga-card-grid
					[totalItems]="pagination?.totalItems"
					[settings]="settingsSmartTable"
					[source]="users"
					(scroll)="onScroll()"
					(onSelectedItem)="selectUser($event)"
				></ga-card-grid>
			</div>
		</ng-template>
	</nb-card-body>
</nb-card>

<ng-template #actionButtons let-selectedItem="selectedItem">
	<ng-template ngxPermissionsOnly="ORG_USERS_EDIT">
		<div class="actions">
			<button
				nbButton
				[disabled]="!selectedItem && disableButton"
				status="basic"
				class="action secondary"
				size="small"
				underConstruction
			>
				<nb-icon class="mr-1" icon="eye-outline"></nb-icon>{{ 'BUTTONS.VIEW' | translate }}
			</button>
			<button
				nbButton
				[disabled]="!selectedItem && disableButton"
				(click)="edit(selectedItem)"
				status="basic"
				class="action primary"
				size="small"
			>
				<nb-icon class="mr-1" icon="edit-outline"></nb-icon>{{ 'BUTTONS.EDIT' | translate }}
			</button>
			<button
				nbButton
				[disabled]="(!selectedItem && disableButton) || isEmployee()"
				(click)="convertUserToEmployee()"
				status="basic"
				class="action primary"
				size="small"
			>
				<nb-icon class="mr-1" icon="person"></nb-icon> {{ 'BUTTONS.CONVERT_TO_EMPLOYEE' | translate }}
			</button>
			<button
				nbButton
				[disabled]="!selectedItem && disableButton"
				(click)="removeUserFromOrganization(selectedUser, selectedItem)"
				status="basic"
				class="action"
				size="small"
				[nbTooltip]="'BUTTONS.REMOVE' | translate"
			>
				<nb-icon status="danger" icon="trash-2-outline"></nb-icon>
			</button>
		</div>
	</ng-template>
</ng-template>
<ng-template #visible>
	<ng-template ngxPermissionsOnly="ORG_INVITE_EDIT">
		<button
			nbButton
			*ngIf="organizationInvitesAllowed"
			status="basic"
			(click)="invite()"
			class="action info"
			size="small"
		>
			<nb-icon icon="email-outline"></nb-icon>{{ 'BUTTONS.INVITE' | translate }}
		</button>
	</ng-template>
	<button nbButton status="success" size="small" (click)="add()" class="action">
		<nb-icon icon="plus-outline"></nb-icon>
		{{ 'BUTTONS.ADD_NEW' | translate }}
	</button>
	<ng-template ngxPermissionsOnly="TENANT_ADD_EXISTING_USER">
		<button (click)="showAddCard = !showAddCard" nbButton status="warning" class="action" size="small">
			<nb-icon icon="plus-outline"></nb-icon>
			{{ 'BUTTONS.ADD_EXISTING' | translate }}
		</button>
	</ng-template>
</ng-template>
